import React, { useState, useEffect } from 'react'
import { Card, Button, Table } from "antd"
import { findAllRoles } from "../../apis/roleApi"
import MyDrawer from '../../components/MyDrawer'

export default function Role() {
  const [roles, setRoles] = useState([])
  const [open, setOpen] = useState(false)
  const [chooseRole,setChooseRole] = useState({})

  useEffect(() => {
    fetchData()
  }, [])
  const fetchData = async () => {
    const res = await findAllRoles()
    console.log(res);
    setRoles(res.data.data)

  }

  const auth = (text) => {
    const obj = {_id:text._id,menus:text.menus}
    console.log(obj);
    setChooseRole(obj)
    setOpen(true)
  }

  const columns = [
    {
      title: '角色名字',
      dataIndex: 'name'
    },
    {
      title: '创建日期',
      dataIndex: 'createTime'
    },
    {
      title: '授权人',
      dataIndex: 'authUser',
    },
    {
      title: '授权日期',
      dataIndex: "authTime"
    },
    {
      title: '操作',
      width: "140px",
      render: (text) => {
        return (
          <span>
            <Button type='default'>删除</Button>&nbsp;&nbsp;
            <Button onClick={() => auth(text)} type="dashed">授权</Button>&nbsp;&nbsp;
          </span>
        )
      }
    }
  ];
  const search = (
    <span>
      <Button type="primary">添加角色</Button>&nbsp;&nbsp;&nbsp;&nbsp;
    </span>
  )
  return (
    <div>
      <Card title={search} style={{ width: "100%" }}>
        <Table
          columns={columns}
          dataSource={roles}
          bordered
          rowKey="_id"
          pagination={{ defaultPageSize: 5, showQuickJumper: true }}
          loading={false}
        />
      </Card>
      {open ? <MyDrawer chooseRole={chooseRole} close={() => setOpen(false)}></MyDrawer> : null}
    </div>
  )
}
